searchDisplay: set a max width on the search results scrolled child

On large displays, we don't want the search results list to expand
across the whole screen; set a maximum width of 1000px.
Unfortunately, since in St max-width only affects size requisition, we
need a little custom layout manager to have it applied to the allocation
too.

https://bugzilla.gnome.org/show_bug.cgi?id=692453

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index c671488881a3bd1db3382c4a3f011990acdeda2c..41a955750de6e2580494b8ebcd8547b1f49793cc 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -779,6 +779,10 @@ StScrollBar StButton#vhandle:active {
     spacing: 18px;
 }
 
+#searchResultsBin {
+    max-width: 1000px;
+}
+
 #searchResultsContent {
     padding-right: 20px;
     spacing: 16px;

diff --git a/js/ui/searchDisplay.js b/js/ui/searchDisplay.js
index 073913f312056cc8d83bd84853eaf89aa373307d..2008451a3e7abdd16d2a8c642a51ce2918483131 100644 (file)
--- a/js/ui/searchDisplay.js
+++ b/js/ui/searchDisplay.js
@@ -17,6 +17,26 @@ const Search = imports.ui.search;
 const MAX_LIST_SEARCH_RESULTS_ROWS = 3;
 const MAX_GRID_SEARCH_RESULTS_ROWS = 1;
 
+const MaxWidthBin = new Lang.Class({
+    Name: 'MaxWidthBin',
+    Extends: St.Bin,
+
+    vfunc_allocate: function(box, flags) {
+        let themeNode = this.get_theme_node();
+        let maxWidth = themeNode.get_max_width();
+        let availWidth = box.x2 - box.x1;
+        let adjustedBox = box;
+
+        if (availWidth > maxWidth) {
+            let excessWidth = availWidth - maxWidth;
+            adjustedBox.x1 += Math.floor(excessWidth / 2);
+            adjustedBox.x2 -= Math.floor(excessWidth / 2);
+        }
+
+        this.parent(adjustedBox, flags);
+    }
+});
+
 const SearchResult = new Lang.Class({
     Name: 'SearchResult',
 
@@ -301,12 +321,19 @@ const SearchResults = new Lang.Class({
 
         this._content = new St.BoxLayout({ name: 'searchResultsContent',
                                            vertical: true });
+        this._contentBin = new MaxWidthBin({ name: 'searchResultsBin',
+                                             x_fill: true,
+                                             y_fill: true,
+                                             child: this._content });
+
+        let scrollChild = new St.BoxLayout();
+        scrollChild.add(this._contentBin, { expand: true });
 
         this._scrollView = new St.ScrollView({ x_fill: true,
                                                y_fill: false,
                                                style_class: 'vfade' });
         this._scrollView.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
-        this._scrollView.add_actor(this._content);
+        this._scrollView.add_actor(scrollChild);
         let action = new Clutter.PanAction({ interpolate: true });
         action.connect('pan', Lang.bind(this, this._onPan));
         this._scrollView.add_action(action);